<template>
<div id="step1" class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div id="name_panel" class="title_panel">
            <div class="weui-cell_hd">
                <label class="weui-label">姓名</label>
            </div>
        </div>
        <div class="weui-cell__bd weui-cell_primary">
            <input id="name" maxlength="6" class="weui-input" type="text" v-model="inputName" @input="inputNameChange" @change="inputNameChange" placeholder="请输入姓名">
        </div>
    </div>
    <div class="weui-cell">
        <div id="frId_panel" class="title_panel">
            <div class="weui-cell_hd">
                <label class="weui-label">身份证号</label>
            </div>
        </div>
        <div class="weui-cell__bd weui-cell_primary">
            <input id="frId" maxlength="18" class="weui-input" type="tel" @change="frIdChange" @input="fridinput" v-model="inputFrid" placeholder="身份证号,末位X以*代替">
        </div>
    </div>
    <div class="weui-cell">
        <div id="phone_panel" class="title_panel">
            <div class="weui-cell_hd">
                <label class="weui-label">手机号</label>
            </div>
        </div>
        <div class="weui-cell__bd weui-cell_primary">
            <input id="phone" maxlength="11" class="weui-input" type="tel" @input="phoneInput" @change="phoneChange" v-model="inputPhone" placeholder="手机号">
        </div>
    </div>
    <div class="weui-cell after-bottom_border">
        <div id="bankNo_panel" class="title_panel">
            <div class="weui-cell_hd">
                <label class="weui-label">银行卡号</label>
            </div>
        </div>
        <div class="weui-cell__bd weui-cell_primary">
            <input id="bankNo" maxlength="19" class="weui-input" type="tel" @change="bankNoChange" @input="bankNoinput" v-model="inputBankNo" placeholder="银行卡号">
        </div>
    </div>
    <div id="agreement-box">
        <div @click="agreeContractFuc" id="checkButton">
            <div class="icheckbox-blue" v-bind:class="{checked:agreeContract}">
                <div class=" ui-checkbox">
                    <input type="checkbox" id="agreement-check" class="light" name="agreement" value="agreement" v-model="agreeContract">
                </div>
            </div>
            <label>我已阅读并同意</label>
        </div>
        <router-link to="/contract">《万鉴通征信服务协议》</router-link>
    </div>
    <div class="page__bd page__bd_spacing">
        <router-link :to="isSubmit?'/step':'/info'" class="weui-btn weui-btn_default" v-bind:class="[isSubmit?'weui-btn_primary':'weui-btn_disabled']">提交</router-link>
    </div>
</div>
</template>

<script>

function titileInputInit() {
    bindSlidePanel();
    bindHidePanel();
}

// 输入框点击展示标题画
function bindSlidePanel() {
    $(".weui-cells_form input").on("touchstart", function(e) {
        var panelId = "#" + e.target.id + "_panel";
        var $panenlId = $(panelId);
        $panenlId.css("display", "block");
        $panenlId.animate({
            "opacity": 0.8,
            "top": "8px"
        });
        console.dir(e);
    });
}

// 输入框改变 如果没有内容 标题收起动画,有展示动画
function bindHidePanel() {
    $(".weui-cells_form input").on("blur", function(e) {
        var panelId = "#" + e.target.id + "_panel";
        var $panenlId = $(panelId);
        if (this.value == "") {
            $panenlId.animate({
                "opacity": 0,
                "top": "32px"
            });
            setTimeout(function() {
                $panenlId.css("display", "none");
            }, 500);

        } else {
            $panenlId.css("display", "block");
            $panenlId.animate({
                "opacity": 0.8,
                "top": "8px"
            });
        }

    });
}

// 计算姓名长度
function getNameLength() {
    var nameVal = $name.val();
    var nameLength = len(nameVal);
    return nameLength;
}

export default  {
    name: 'Fillinfo',  // czc注 组件名
    data () {  // czc 注数据
        return {
          msg: 'Fillinfo',
          inputName:'',
          inputPhone:'',
          inputFrid:'',
          inputBankNo:'',
          isSubmit:false,
          agreeContract:true
        }
    },
    methods:{
        inputNameChange:function  () {
            this.$store.commit("changeInputName",this.inputName);
            if(this.inputName.replace(/[^\u4e00-\u9fa5]/g, "").length > 1 && this.inputName.length == this.inputName.replace(/[^\u4e00-\u9fa5]/g, "").length){
                this.$options.methods.checkedInputValue.bind(this)();
           }
           this.$options.methods.checkedInputValue.bind(this)();
        },
        phoneChange:function(){
           this.$store.commit("changeinputPhone",this.inputPhone);
            if(this.inputPhone.length == 11){
                $("#phone_panel").find(".weui-label").text("手机号").removeClass("info-prompt");
            }else {
                $("#phone_panel").find(".weui-label").text("手机号错误").addClass("info-prompt");
            }
            this.$options.methods.checkedInputValue.bind(this)();

        },
        phoneInput:function(){
            if(this.inputPhone.length == 11){
                $("#phone_panel").find(".weui-label").text("手机号").removeClass("info-prompt");
                this.$options.methods.checkedInputValue.bind(this)();
            }
            this.$options.methods.checkedInputValue.bind(this)();
        },
        frIdChange: function() {
            this.$store.commit("changeInputFrid",this.inputFrid);
            var idRegExp = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
            if (idRegExp.test(this.inputFrid)) {
                $("#frId_panel").find(".weui-label").text("身份证号").removeClass("info-prompt");
            } else {
                $("#frId_panel").find(".weui-label").text("身份证号错误").addClass("info-prompt");
            }
            this.$options.methods.checkedInputValue.bind(this)();
        },
        fridinput:function(){
            var idRegExp = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
            if (idRegExp.test(this.inputFrid)) {
                $("#frId_panel").find(".weui-label").text("身份证号").removeClass("info-prompt");
                this.$options.methods.checkedInputValue.bind(this)();
            }
            this.$options.methods.checkedInputValue.bind(this)();
        },
        bankNoChange:function(){
            this.$store.commit("changeInputBankNo",this.inputBankNo);
            var carIdValue = this.inputBankNo.replace(/\D/g, "");
            if (carIdValue.length > 12 && carIdValue.length < 20) {
                $("#bankNo_panel").find(".weui-label").text("银行卡号").removeClass("info-prompt");
            } else {
                $("#bankNo_panel").find(".weui-label").text("银行卡号错误").addClass("info-prompt");
            }
            this.$options.methods.checkedInputValue.bind(this)();
        },
        bankNoinput:function(){
            var carIdValue = this.inputBankNo.replace(/\D/g, "");
            if (carIdValue.length > 12 && carIdValue.length < 20) {
                $("#bankNo_panel").find(".weui-label").text("银行卡号").removeClass("info-prompt");
                this.$options.methods.checkedInputValue.bind(this)();
            }
            this.$options.methods.checkedInputValue.bind(this)();
        },
        agreeContractFuc:function  () {
            this.agreeContract = !this.agreeContract;
        },
        checkedInputValue() {
       //     var isSubmit = false;
            var isCard = true;
            var idRegExp = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
            if(this.inputBankNo.length <13 || this.inputBankNo.length > 19){
               isCard = false;
            }
            if(this.inputPhone.length == 11 && isCard && this.inputName.replace(/[^\u4e00-\u9fa5]/g, "").length > 1 && this.inputName.length == this.inputName.replace(/[^\u4e00-\u9fa5]/g, "").length && idRegExp.test(this.inputFrid) && this.agreeContract){
                this.isSubmit = true;
            }else{
                this.isSubmit = false;
            }
            this.$store.commit("changeIsSubmit",this.inputBankNo);

        }
    },
    mounted:function(){
        titileInputInit();
    }
}

</script>

<style lang='scss' scoped>
#step1 {
    margin-top: 0;
    &:after {
        border-bottom-width: 0px;
    }
    #verifyBtn_box {
        position: relative;
    }
    #verifyBtn {
        font-size: 13px;
        position: absolute;
        width: 130px;
        top: -20px;
        left: -125px;
    }
    .bottom_border:after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        color: #D9D9D9;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
    }
    .weui-label.info-prompt{
        color: #f00;
    }
}
#agreement-box {
    margin: 20px 15px;
    .icheckbox-blue {
        display: inline-block;
        vertical-align: bottom;
        margin: 0;
        padding: 0;
        width: 22px;
        height: 22px;
        background: url(../assets/img/blue@2x.png) no-repeat;
        background-size: 70px 24px;
        border: none;
        cursor: pointer;
        -moz-transform: scale(0.82);
        -webkit-transform: scale(0.82);
        -o-transform: scale(0.82);
    }
    .icheckbox-blue.checked {
        background-position: -48px 0;
    }
    #checkButton {
        display: inline-block;
        >label {
            font-szie: 13px;
            font-size: 13px;
            color: #A5A1A1;
        }
        input[type="checkbox"] {
            display: none;
        }
    }
}
.title_panel {
    font-size: 12px;
    opacity: 0.2;
    top: 32px;
    padding-bottom: 0px;
    position: absolute;
    display: none;
    .weui-label {
        width: 125px;
    }
}
.weui-cells{
    font-size: 16px;
}
.weui-cell {
    padding-top: 32px;
}

</style>
